<!DOCTYPE HTML>
<html>
<head>
	
	<title>www.cssmoban.com</title>
	
	<link rel="stylesheet" href="./css/reset.css" type="text/css" />
	<link rel="stylesheet" href="./css/style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css' />
	
	<!--[if IE]>
	<script src="./js/html5.js" type="text/javascript"></script>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
	<![endif]-->
	
	<script src="./js/jquery.js"></script>
	<script src="./js/selectivizr.js"></script>
	<script src="./js/prettyphoto.js"></script>
	<script src="./js/onload.js"></script>

    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div id="page">

	<!-- BEGIN TITLEBAR -->
	<header id="titlebar">

		<a href="http://www.cssmoban.com/" id="logo"></a>

		<ul id="top_menu">
			<li>
				<a href="./index.html">Home</a>
			</li>
			<li>
				<a href="./about.htm.html">About Us</a>
			</li>
			<li>
				<a href="./blog.htm.html">Blog</a>
			</li>
			<li class="current-menu-item">
				<a href="#">Shortcodes</a>
				<ul>
					<li>
						<a href="./columns.htm.html">Columns</a>
					</li>
					<li>
						<a href="./elements.htm.html">Elements</a>
					</li>
					<li class="current-menu-item">
						<a href="./typography.htm.html">Typography</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="./portfolio.htm.html">Portfolio</a>
                 <ul>
					<li>
						<a href="./portfolio.htm.html">Portfolio Image</a>
					</li>
					<li>
						<a href="./portfolio-video.htm.html">Portfolio Video</a>
					</li>
					<li>
						<a href="./portfolio-other.htm.html">Portfolio Other</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="./contact.htm.html">Contact</a>
			</li>
		</ul>

		<ul id="top">
			<li>Want more?</li>
			<li>
				<a href="#" class="cloud facebook">
					<span class="arrow"></span>
				</a>
			</li>
			<li>
				<a href="#" class="cloud rss">
					<span class="arrow"></span>
				</a>
			</li>
		</ul>

	</header>
	<!-- END TITLEBAR -->


	<!-- BEGIN ARTICLE -->
	<article class="typography page_text" id="content">
	
		<header class="page_text title">
			<h1>Shortcodes - <strong>Typography</strong></h1>
		</header>

		<!-- BEGIN SHORTCODES -->
		<section class="article">

		<h1>Heading 1 Tag</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
		
		<h2>Heading 2 Tag</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
		
		<h3>Heading 3 Tag</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
		
		<h4>Heading 4 Tag</h4>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
		
		<h5>Heading 5 Tag</h5>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
		
		<h6>Heading 6 Tag</h6>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
		
		</section>
		<!-- END SHORTCODES -->


		<hr />
		
		
		<!-- BEGIN PULL QUOTES -->
		<h1>Pull quotes</h1>
		
		<p>Tempus orci fermentum rutrum. Donec sodales quam et accumsan tincidunt. Praesent consequat. Donec adipiscing sapien vitae ultrices posuere quis, eleifend nunc vel quam placerat semper, nisl ac felis. Quisque iaculis, turpis semper risus. Sed molestie.
		
		<q class="float_right">Integer adipiscing. Mauris imperdiet faucibus orci ut massa. Nam lacus. 
	   Vivavel turpis tellus, condimentum urna, placerat consequat.</q>
		
non. Felis a dolor ut felis. Cum sociis natoque penatibus et ultrices posuere orci. 
ipsum adipiscing diam tempor scelerisque, quam sem, accumsan odio orci, blandit a, tortor. Morbi consequat faucibus, quam. Aliquam ante sem dolor eu odio.
		</p>
		<!-- END PULL QUOTES -->


		<hr />
		

		<!-- BEGIN BLOCK QUOTES -->
		<h1>Block quotes</h1>
		
		<blockquote>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. Phasellus adipiscing. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
			<p class="author">NewCore</p>
		</blockquote>
		
		<blockquote>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. Phasellus adipiscing. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
			<p class="author">Activden</p>
		</blockquote>
		<!-- END BLOCK QUOTES -->


		<hr />

		
		<!-- BEGIN IMAGES -->
		<h1>Images</h1>
		
		<figure class="float_left">
			<img src="./img/examples/typography_1.jpg" alt="" />
		</figure>

		<p>In lobortis mauris sit amet augue ut magna in nisl. Morbi vitae justo. Aliquam ultricies accumsan. Fusce sed eros. Sed ut diam a felis. Fusce ligula. Vivamus fermentum eget, lacinia eget, dapibus risus. Vivamus laoreet hendrerit risus. Etiam varius nec, aliquam ut, gravida non, ligula. Suspendisse potenti. Aliquam nisl.</p>

<p>Inceptos hymenaeos. Maecenas sapien accumsan fringilla at, velit. Mauris vitae sapien quis dolor. Vestibulum at libero. Cras mattis, magna lectus, eu pulvinar ut, accumsan sed, pretium cursus. In hac habitasse platea dictumst. Nunc justo at ligula.</p>
		
		<p>Cras mattis, magna diam, venenatis augue mi, nec diam. Vestibulum elit justo nibh, volutpat</p>

		<p>Bibendum. In eros cursus a, dolor. Suspendisse adipiscing iaculis. Pellentesque dapibus risus. Suspendisse semper eros. Pellentesque eget diam elit est, et purus at sapien aliquet elit, varius vehicula. Duis sed leo. Cras turpis egestas. Mauris eros sed viverra diam sit amet, nonummy eget, aliquet ipsum ante, cursus arcu nibh quis</p>
		
		<figure class="float_right">
			<img src="./img/examples/typography_2.jpg" alt="" />
			<figcaption>Caption here</figcaption>
		</figure>

		<p>Nisl mollis risus. Nulla ac arcu. Donec nunc. Fusce ullamcorper. Suspendisse et ultrices metus facilisis congue. Donec eleifend magna neque, quis neque. Duis sodales lectus semper risus. Sed placerat. Vivamus eget lacus tellus sodales quam in faucibus sit amet augue a wisi. Phasellus urna risus nunc, placerat at, venenatis nisl.</p>

		<p>Commodo. Suspendisse sapien. Morbi pede. Aliquam erat vitae pede. Vestibulum convallis ligula condimentum dignissim. Phasellus blandit, dui a venenatis consequat. Integer posuere in, volutpat facilisis, quam in eleifend magna diam, venenatis arcu. Duis quam ut justo. Integer leo mollis aliquam, nulla sed ante ipsum dolor urna mattis magna. Bibendum. In eros cursus a, dolor. Suspendisse adipiscing iaculis. Pellentesque dapibus risus. Suspendisse semper eros. </p>
		
		<p>Bibendum. In eros cursus a, dolor. Suspendisse adipiscing iaculis. Pellentesque dapibus risus. Suspendisse semper eros. Pellentesque eget diam elit est, et purus at sapien aliquet elit, varius vehicula. Duis sed leo. Cras turpis egestas. Mauris eros sed viverra diam sit amet, nonummy eget, aliquet ipsum ante, cursus arcu nibh quis</p>
		<!-- END IMAGES -->


	</article>
	<!-- END ARTICLE -->
	
	


</div>
<!--  END PAGE -->


<!--  START FOOTER -->
<footer id="footer">
	
	<section class="contact">
		
		<span class="mobile">
			<strong>Mobile Phone:</strong> 555 152 535
		</span>

		<span class="mail">
			<strong>E-mail:</strong> <a href="mailto:contact@experience.com">contact@experience.com</a>
		</span>
		
		<a class="top">top</a>

	</section>

	<nav>
		<ul id="footer_menu">
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.htm.html">About Us</a></li>
			<li><a href="./blog.htm.html">Blog</a></li>
			<li class="current-menu-item"><a href="./portfolio.htm.html">Shortcodes</a></li>
			<li><a href="./typography.htm.html">Portfolio</a></li>
			<li><a href="./contact.htm.html">Contact</a></li>
		</ul>
	</nav>
	
	<p class="copyright">
		&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/" title="模板之家">模板之家</a> Collect from <a href="http://www.cssmoban.com/" title="网站模板" target="_blank">网站模板</a>
	</p>

</footer>
<!--  END FOOTER -->



</body>
</html>